import React, { useRef } from 'react'
import { Button, Form, Modal } from 'react-bootstrap'
import { useBudgets } from '../context/BudgetsContext';

export default function AddBugetModel({show, handleCloce}) {
    const nameRef = useRef();
    const maxRef = useRef();
    const {addBudget} = useBudgets();

    function handldSubmit(e) {
        e.preventDefault();
        addBudget(nameRef.current.value, parseFloat(maxRef.current.value));
        handleCloce();
    }
    return (
        <Modal show = {show} onHide = {handleCloce}>
            <Form onSubmit={handldSubmit}>
                <Modal.Header closeButton>
                    <Modal.Title>New Budget</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                        <Form.Group className='mb-3' controlId='name'>
                            <Form.Label>Name</Form.Label>
                            <Form.Control ref={nameRef} type='text' required />
                        </Form.Group>
                        <Form.Group className='mb-3' controlId='max'>
                            <Form.Label>Max Spending</Form.Label>
                            <Form.Control ref={maxRef} type='number' required min={0} step={0.1} />
                        </Form.Group>
                        <div className='d-flex justify-content-end'>
                            <Button variant='primary' type='submit'>yes</Button>
                        </div>
                </Modal.Body>
            </Form>
        </Modal>
    )
}
